<template>
    <el-dialog v-model="dialogVisible" title="导入" width="80%">
      <div class="table-header">
        <el-button type="primary" @click="addRow">+ 添加商品</el-button>
      </div>
  
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column prop="name" label="商品名称" :min-width="180">
          <template #default="{ row, $index }">
            <el-input v-model="row.name" />
          </template>
        </el-table-column>
        <el-table-column prop="code" label="商品编码" :min-width="180">
          <template #default="{ row, $index }">
            <el-input v-model="row.code" />
          </template>
        </el-table-column>
        <el-table-column prop="spec" label="规格" :min-width="180">
          <template #default="{ row, $index }">
            <el-input v-model="row.spec" />
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" :min-width="120">
          <template #default="{ row, $index }">
            <el-input v-model="row.quantity" />
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" :min-width="120">
          <template #default="{ row, $index }">
            <el-input v-model="row.unit" />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="报关单价" :min-width="120">
          <template #default="{ row, $index }">
            <el-input v-model="row.price" />
          </template>
        </el-table-column>
        <el-table-column label="操作" :min-width="150">
          <template #default="{ row, $index }">
            <el-button type="danger" @click="removeRow($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-row>
        <el-col :span="24">
          <el-button type="success" @click="submitData" style="width: 100%;">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </template>
  
  <script>
  import { ref } from 'vue';
  import axios from 'axios';
  
  export default {
    setup() {
      const dialogVisible = ref(false);
      const tableData = ref([
        { name: '', code: '', spec: '', quantity: '', unit: '', price: '' },
      ]);
  
      const addRow = () => {
        tableData.value.push({ name: '', code: '', spec: '', quantity: '', unit: '', price: '' });
      };
  
      const removeRow = (index) => {
        tableData.value.splice(index, 1);
      };
  
      const submitData = async () => {
        try {
          const response = await axios.post('http://localhost:8000/api/ocr.Declaration/save?app_id=10001', {
            table: tableData.value
          });
          console.log('提交成功', response.data);
          // 处理提交成功后的逻辑
        } catch (error) {
          console.error('提交失败', error);
          // 处理提交失败后的逻辑
        }
      };
  
      return {
        dialogVisible,
        tableData,
        addRow,
        removeRow,
        submitData
      };
    }
  };
  </script>
  
  <style scoped>
  .header-center {
    text-align: center;
  }
  .table-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  </style>